@charset "utf-8";

@function vw($a){
    @return ( $a / 640 ) * 100vw;
}
header{
    width: 100%;
    height: vw(75);
    position: absolute;
    top: 0;
.ring-head{
        padding-left: vw(28);
        padding-top: vw(22);
        img{
            width: vw(18);
            height: vw(37);
        }
    }
    .ring-head2{
        padding-left: vw(260);
        padding-top: vw(24);
        p{
            font-size: vw(30);
        }
    }
}
section{
    width: 100%;
    position: absolute;
    top: vw(75);
    overflow-y: scroll;
    .outfit-select{
        width: 100%;
        position: relative;
    .outfit{
        width: 100%;
        height: vw(61);
        background: #f2f2f2;
        li{
            width: vw(212);
            height: vw(61);
            list-style: none;
            float: left;
            text-align: center;
            line-height: vw(61);
            font-size: vw(20);
            position: relative;
        }
        li:after{
            content: "";
            position: absolute;
            border-top: vw(8) solid black;
            border-right:vw(10) solid transparent;
            border-left:vw(10) solid transparent;
            border-bottom: 0;
            top: 45%;
            left:61%;
        }
    }
    #yincang1{
        position: absolute;
        top: 0;
        left: 0;
            a{
                color: blue;
            }
            a:hover{
                color: red;
            }
        }
}
    .outfit-li{
        width: 100%;
        height: vw(429);
        li{
            width: vw(212);
            height: vw(212);
            float: left;
            list-style: none;
            margin-bottom: vw(2);
            margin-right: vw(2);
            position: relative;
            .outfit-li-font{
                position: absolute;
                bottom: 0;
                width: vw(214);
                height: vw(58);
                background: white;
                opacity: .5;
                text-align: center;
                h1{
                    font-size:vw(20);
                    color: black;
                    font-weight: normal;
                }
                p{
                    font-size:vw(20);
                    color: black;
                }
            }
            img{
                width: 100%;
                height: 100%;
            }
        }
        li:nth-child(3n){
            margin-right: vw(0);
        }
    }
}
.outfit-li-font{
                animation: to 1s linear;
            }
                @keyframes to{
                    0%{transform:translateY(vw(-50)) rotateY(45deg);}
                    100%{transform:translateY(vw(0)) rotateY(0);}
                }